<template>
  <div class="app-container">
    <div class="elRow">
      <div style="padding: 0 0 30px; display: flex;width: 100%;">
        <div
          v-for="(totalItem, totalIndex) in totalData"
          :key="totalIndex"
          style="margin-right: 16px;width: 50%;background: linear-gradient( 90deg, #108FAE 0%, #005266 100%);;border-radius: 8px;"
        >
          <div
            style="
              text-align: center;
              line-height: 42px;
              border-bottom: none;
              color: #fff;
              font-weight: 500;
            "
          >
            {{ totalItem.label }}
          </div>
          <div
            class="Grid Grid--1of4 Grid--center Grid--justifyCenter text-center"
            style="width: calc(100%); padding: 0 2px 2px 0"
          >
            <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
              <div class="text-xl mb-1" style="color: #222222;font-size: 20px;">{{ totalItem.value['orders'] }}</div>
              <div style="color: #666666;font-size: 14px;">订单数</div>
            </div>
            <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
              <div class="text-xl mb-1" style="color: #222222;font-size: 20px;">{{ totalItem.value['sales'] }}</div>
              <div style="color: #666666;font-size: 14px;">成交数</div>
            </div>
            <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
              <div v-if="totalItem.value['amount'] != undefined" class="text-xl mb-1" style="color: #222222;font-size: 20px;">
                &yen;{{ totalItem.value['amount'] }}
              </div>
              <div style="color: #666666;font-size: 14px;">总金额</div>
            </div>
            <div class="Grid-cell" style="background-color: #fff;margin-left: 2px;flex: 0 0 calc(25% - 2px);border-radius: 6px;padding: 16px 0;">
              <div v-if="totalItem.value['pay_amount'] != undefined" class="text-xl mb-1" style="color: #222222;font-size: 20px;">
                &yen;{{ totalItem.value['pay_amount'] }}
              </div>
              <div style="color: #666666;font-size: 14px;">实收金额(已扣退款)</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 查询 -->
      <el-row>
        <el-col class="mb-2">
          <el-tree-select
            v-if="role_ids.includes(1) || role_ids.includes(4)"
            class="ya-search-value  mr-6 mb-2"
            v-model="query.dept_id"
            :data="dept_list"
            :props="{
              children: 'children', //自定义属性
              label: 'dept_name',
              value: 'dept_id'
            }"
            filterable
            clearable
            placeholder="所属组"
            default-expand-all
            :render-after-expand="false"
            check-strictly
          />
          <el-select
            v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
            v-model="query.user_id"
            filterable
            class="ya-search-value  mr-6 mb-2"
            clearable
            placeholder="请选择销售人员"
          >
            <el-option
              v-for="item in user_list"
              :key="item.user_id"
              :label="item.nickname"
              :value="item.user_id"
            />
          </el-select>
          <el-input
            v-model="query.order_no"
            class="ya-search-value  mr-6 mb-2"
            placeholder="请输入订单号ID"
            clearable
          />
          <div style="display: inline-block; color: rgb(123 125 129)">
            <span>创建时间:</span>
            <el-date-picker
              v-model="query.date_value"
              type="datetimerange"
              class="ya-date-value  mr-6 mb-2"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="dateShortcuts"
              @change="search()"
              popper-class="datetimerange-style"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="[new Date(2024, 1, 1, 0, 0, 0), new Date(2024, 1, 1, 23, 59, 59)]"
            />
          </div>
          <el-select
            v-model="query.pay_type"
            class="ya-search-value  mr-6 mb-2"
            clearable
            placeholder="筛选支付方式"
          >
            <el-option
              v-for="item in payList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="query.title"
            class="ya-search-value  mr-6 mb-2"
            placeholder="请输入方案标题"
            clearable
          />
          <el-input
            v-model="query.nick"
            class="ya-search-value  mr-6 mb-2"
            placeholder="请输入粉丝昵称"
            clearable
          />
          <el-select
            v-model="query.status"
            class="ya-search-value  mr-6 mb-2"
            clearable
            placeholder="筛选订单状态"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="query.market_id"
            class="ya-search-value mr-6 mb-2"
            style="width: 160px"
            clearable
            placeholder="筛选营销方案"
          >
            <el-option v-for="(item,index) in marketData" :key="index" :value="item.id" :label="item.title" />
            <!-- <el-option value="2" label="不中包退" />
            <el-option value="3" label="买一送一" />
            <el-option value="4" label="新人首免" />
            <el-option value="5" label="定时秒杀" /> -->
          </el-select>
          <el-button class="mb-2" type="primary" @click="search()">查询</el-button>
          <el-button class="mb-2" title="重置" @click="refresh()">重置 </el-button>
        </el-col>
      </el-row>
    </div>

    <div style="background-color: #fff;padding: 20px 30px;border-radius: 10px;">
      <!-- 列表 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="data"
        height="calc(100vh - 490px)"
        stripe
        highlight-current-row
      >
        <el-table-column prop="order_no" label="订单号" />
        <el-table-column prop="wechat_info.title" label="公众号" />
        <!-- <el-table-column prop="title" label="标题" show-overflow-tooltip /> -->
        <el-table-column align="left" prop="title" label="标题" min-width="160">
          <template #default="scope">
            <div :title="scope.row.title">
              <!-- style="
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
                text-overflow: ellipsis;
              " -->
              <!-- <el-tag :type="scope.row.category_id == 3 ? 'danger' : ''">{{
                categoryMap[scope.row.category_id].label
              }}</el-tag> -->

            <el-tag
              v-if="scope.row.vid"
              style="border: none"
              type="danger"
              class="mr-2"
              size="small"
              >视频</el-tag
            >
            <el-tag
              v-if="scope.row.category_id != 5"
              style="border: none"
              size="small"
              :class="scope.row.category_id == 4 ? 'tagColor' : 'primary'"
              >{{ categoryMap[scope.row.category_id].label }}</el-tag
            >
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="订单价格" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.price != null">&yen;{{ scope.row.price }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="pay_real" label="实付金额" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.pay_real != null">&yen;{{ scope.row.pay_real }}</div>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" show-overflow-tooltip>
          <template #default="scope">
            {{ payList[scope.row.pay_type - 1].label }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" show-overflow-tooltip>
          <template #default="scope">
            {{ statusList[scope.row.pay_status].label }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
          label="销售信息"
          width="200"
        >
          <template #default="scope">
            <div>
              {{ scope.row.sale_info.nickname ? '销售员：' + scope.row.sale_info.nickname : '' }}
            </div>
            <div>
              {{ scope.row.sale_info.dept_names ? '组别：' + scope.row.sale_info.dept_names : '' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="营销方案" show-overflow-tooltip>
          <template #default="scope">
            <div v-for="(item, index) in scope.row.market_ids" :key="index">
              <el-tag
                style="margin-bottom: 5px; border: none"
                size="small"
                effect="light"
                type="warning"
                >{{ market[item - 1] }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" min-width="120" />
        <el-table-column prop="pay_time" label="支付时间" min-width="120" />
        <el-table-column label="收款商户" min-width="120">
          <template #default="scope">
            <div>{{ scope.row.merchant_info ? scope.row.merchant_info.mch_id : '' }}</div>
            <div>{{ scope.row.merchant_info ? scope.row.merchant_info.name : '' }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="sale_id" label="所属销售" show-overflow-tooltip /> -->
        <el-table-column align="center" label="粉丝信息" width="180">
          <template #default="scope">
            <div style="display: flex; justify-items: center">
              <!-- <img
                :src="scope.row.headimgurl"
                style="width: 44px; height: 44px; border-radius: 100px; border: 1px solid #eee"
                alt=""
              /> -->
              <div style="position: relative;width: 44px;height:44px;">
                <img :src="scope.row.headimgurl" style="width: 44px;height:44px;border-radius: 100px;border: 1px solid #eee;" alt="">
                <img v-if="scope.row.is_subscribe" style="position: absolute;right: 0;bottom: 0;width: 16px" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/wechart.png" alt="">
              </div>
              <span class="ml-2" style="text-align: left">
                <div>昵称：{{ scope.row.nickname }}</div>
                <div>ID：{{ scope.row.member_id }}</div>
              </span>
            </div>
            <div class="" style="color: red">已购{{ scope.row.buy_count }}次</div>
          </template>
        </el-table-column>
        <el-table-column prop="confirm_info.nickname" label="认领人" min-width="120" />
        <el-table-column align="center" label="操作" show-overflow-tooltip>
          <template #default="scope">
            <!-- v-if="scope.row.confirm_allow" -->
            <el-link
              v-if="scope.row.confirm_allow"
              type="primary"
              class="mr-1"
              :underline="false"
              @click="getClaim(scope.row)"
            >
              认领
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="count > 0"
        v-model:total="count"
        v-model:page="query.page"
        v-model:limit="query.limit"
        @pagination="list"
      />
    </div>
    <!-- 认领 -->
    <el-dialog
      v-model="dialogVisible"
      title="认领"
      width="360px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div style="text-align: center">
        <el-select
          v-model="claimQuery.user_id"
          :remote-method="remoteMethod"
          filterable
          remote
          reserve-keyword
          placeholder="请选择人员"
          style="width: 240px"
        >
          <el-option
            v-for="item in claimList"
            :key="item.user_id"
            :label="item.nickname"
            :value="item.user_id"
          />
        </el-select>
      </div>
      <template #footer>
        <el-button :loading="loading" @click="dialogVisible = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="getConfirm">确定</el-button>
      </template>
    </el-dialog>
    
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination/index.vue'
import { getPageLimit } from '@/utils/settings'
import dayjs from 'dayjs'
import { list, userList, confirm } from '@/api/order/order'
import { marketList } from '@/api/content/content'
import { useUserStoreHook } from '@/store/modules/user'
import { shortcuts } from '@/utils/index'
import { myUserList } from '@/api/order/statistics'
const userStore = useUserStoreHook()

export default {
  name: 'OrderIndex',
  components: { Pagination },

  data() {
    return {
      marketData: [],//营销方案
      user_list: [], //销售员
      dept_list: [], //所属组
      dateShortcuts: shortcuts,
      market: ['留资优惠', '不中包退', '买一送一', '新人首免', '定时秒杀', '数据分析'], //营销方案
      dialogVisible: false, //认领弹窗
      claimList: [], //认领列表
      // 认领入参
      claimQuery: {
        user_id: '',
        order_id: null
      },
      // 总计
      totalData: [
        { label: '累计', value: {} },
        { label: '当前条件', value: {} }
      ], //总和
      name: '内容',
      height: 680,
      loading: false, //列表加载
      categoryMap: {
        3: {
          label: '足球',
          color: '#00b42a'
        },
        4: {
          label: '篮球',
          color: '#ffbf29'
        }
      },
      // 入参
      query: {
        page: 1,
        limit: getPageLimit(),
        order_no: '',
        pay_type: null,
        title: '',
        nick: '',
        status: null,
        market_id: '',
        date_field: 'o.create_time',
        date_value: [
          `${dayjs().startOf('month').format('YYYY-MM-DD')} 00:00:00`,
          `${dayjs().format('YYYY-MM-DD 23:59:59')}`
        ], //默认当天
        dept_id: '',
        user_id: ''
      },
      // 支付类型
      payList: [
        {
          value: '1',
          label: '微信'
        },
        {
          value: '2',
          label: '支付宝'
        },
        {
          value: '3',
          label: '余额'
        },
        {
          value: '4',
          label: '微信(第三方)'
        },
        {
          value: '5',
          label: '支付宝(第三方)'
        }
      ], //支付方式
      statusList: [
        {
          value: '0',
          label: '未支付'
        },
        {
          value: '1',
          label: '已支付'
        },
        {
          value: '2',
          label: '已退款'
        }
      ], //状态类型
      data: [], //数据列表
      count: 0, //数据总条数
      role_ids: []
    }
  },
  watch: {
    'query.dept_id': {
      handler() {
        this.user_list = []
        this.query.user_id = ''
        if (this.query.dept_id) {
          myUserList({
            dept_id: this.query.dept_id
          })
            .then((res) => {
              console.log(res)
              if (res.code == 200) {
                this.user_list = res.data
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.user_list = userStore.user.user_list
        }
      }
    }
  },
  created() {
    this.height = screenHeight()
    this.user_list = userStore.user.user_list
    this.dept_list = userStore.user.dept_list
    this.role_ids = userStore.user.role_ids
    if (this.role_ids.includes(3)||this.role_ids.includes(4)) {
      this.query.user_id = userStore.user.user_id
    }
    this.list()
    this.marketList()
  },
  methods: {
    // 营销列表
    marketList() {
      marketList().then((res) => {
        if (res.code == 200) {
          this.marketData = res.data
        }
      })
    },
    // 列表
    list() {
      this.loading = true
      list(this.query)
        .then((res) => {
          this.data = res.data.list
          this.count = res.data.count
          this.totalData[0].value = res.data.total
          this.totalData[1].value = res.data.this_total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查询
    search() {
      this.query.page = 1
      this.list()
    },
    // 刷新
    refresh() {
      const limit = this.query.limit
      this.query = this.$options.data().query
      this.$refs['table'].clearSort()
      this.query.limit = limit
      if (this.role_ids.includes(3)) {
        this.query.user_id = userStore.user.user_id
      }
      this.list()
    },
    // 认领确认
    getConfirm() {
      confirm(this.claimQuery).then((res) => {
        if (res.code == 200) {
          ElMessage.success('认领成功')
          this.dialogVisible = false
          this.list()
        }
      })
    },
    // 输入搜索
    remoteMethod(query) {
      if (!query) return
      userList({
        page: 1,
        limit: 100000,
        search_field: 'nickname',
        search_exp: 'like',
        search_value: query
      }).then((res) => {
        if (res.code == 200) {
          this.claimList = res.data.list
        }
      })
    },
    // 认领人员列表
    getClaim(item) {
      this.dialogVisible = true
      // this.claimQuery.user_id = item.confirm_info?item.confirm_info.user_id:null
      this.claimQuery.order_id = item.order_id
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding: 0;
  background-color: #efefef;
  .elRow{
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px 30px 5px;
    border-radius: 10px;
  }
  .primary{
  background: #EBF6F9;
  color: #005266;
}
.tagColor {
  background: #edf8ff;
  color: #3ea5e9;
}
  ::v-deep .el-tabs__nav-wrap{
    padding: 0 22px;
  }
}
</style>